<template>
  <div>
    <div style="display: flex">
      <a-button class="editable-add-btn" @click="showModal"> Add </a-button>
    </div>
    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        @submit="handleSubmit"
      >
        <a-form-item label="用户名">
          <a-select
            placeholder="Select a option and change input text above"
            @change="handleSelectChange1"
          >
            <a-select-option v-for="item in userList" :key="item.userId">
              {{ item.userName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="角色名">
          <a-select
            placeholder="Select a option and change input text above"
            @change="handleSelectChange2"
          >
            <a-select-option v-for="item in roleList" :key="item.roleId">
              {{ item.roleName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      visible: false,
      userList: [],
      roleList: [],
      userData: "",
      roleData: "",
    };
  },
  mounted() {
    axios.get("http://localhost:8080/api/user/all").then(
      (response) => {
        console.log(response.data.msg);
        this.userList = response.data.data;
      },
      (error) => {
        console.log(error.message.msg);
      }
    );
    axios.get("http://localhost:8080/api/role/all").then(
      (response) => {
        console.log(response.data.msg);
        this.roleList = response.data.data;
      },
      (error) => {
        console.log(error.message.msg);
      }
    );
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
      axios
        .post("http://localhost:8080/api/userRole/one", {
          userId: this.userData,
          roleId: this.roleData,
        })
        .then(
          (response) => {
            console.log(response.data.msg);
          },
          (error) => {
            console.log(error.message.msg);
          }
        );
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    handleSelectChange1(value) {
      console.log(value);
      this.userData = value;
    },
    handleSelectChange2(value) {
      console.log(value);
      this.roleData = value;
    },
  },
};
</script>

<style scoped>
.editable-add-btn {
  margin-bottom: 8px;
}
</style>
